<template>
  <div class="container">
    <van-nav-bar @click-left="clickLeft" left-arrow :title="titleName">
      <template #right>
        <van-icon name="star" size="18" is-link @click="starClick" :color="starColor" />
      </template>
    </van-nav-bar>

    <div class="phone-wrap">
      <div class="y-progress">
        <van-progress
          :percentage="percentage"
          pivot-text
          stroke-width="8"
          pivot-color="#7232dd"
          color="linear-gradient(to right, #27BFFE, #27A4FE)"
        />
        <span class="progress-tip">{{ current+1+'/'+total}}</span>
      </div>
      <div class="padding-lr y-question">
        <van-swipe
          class="my-swipe"
          autoplay="none"
          indicator-color="white"
          @change="change"
          :loop="false"
          ref="swipe"
        >
          <van-swipe-item v-for="(item,index) in dataList" :key="index">
            <Ti :data="item" @setAnswer="setAnswer"></Ti>
          </van-swipe-item>
        </van-swipe>
      </div>

      <TabBar
        class="tabAbsolute"
        :showTypeList="['tika','submit']"
        @change="swipeChange"
        @submit="tabBarSubmit"
        @tika="tikaShowMethod"
      ></TabBar>
      <Tika
        @close="tikaClose"
        @href="swipeHref"
        :show="tikaShow"
        :data="dataList"
        :current="current"
      ></Tika>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { mapState } from "vuex";
import TabBar from "../components/TabBars";
import Tika from "../components/Tikas";
import Ti from "../components/Tis";
export default {
  metaInfo: {
    title: "My Example App", // set a title
    meta: [
      {
        // set meta
        name: "keyWords",
        content: "My Example App"
      }
    ]
  },
  components: {
    TabBar,
    Tika,
    Ti,
    Dialog
  },
  computed: {
    ...mapState({
      bank_id: state => state.question.bank_id,
      subject_id: state => state.question.subject_id,
      exam_id: state => state.question.exam_id,
      papers_id: state => state.question.papers_id,
      type: state => state.question.type,
      model: state => state.question.model,
      chapter_id: state => state.question.chapter_id,
      joint_id: state => state.question.joint_id,

      subject_List: state => state.question.zjList,
      zjList: state => state.question.zjList,

      question_type: state => state.question.question_type,
      exam_type: state => state.question.exam_type,
      exam_count: state => state.question.exam_count,

      startTime: state => state.question.startTime
    }),
    percentage() {
      return ((this.current + 1) / this.total) * 100;
    },
    starColor() {
      return this.isStar ? "#e6a23c" : "#fff";
    }
  },
  created() {
    this.initData();
    this.isPc = this.$Common.navigator() == "pc";
  },
  data() {
    return {
      titleName: "",
      isPc: false,
      showAnswer: false, //是否展示答案与解析
      current: 0, //当前第几道题
      total: 1, //总题数
      dataList: [], //题目数组
      tikaShow: false, //题卡显示隐藏
      customColor: "#409eff",
      isStar: false //是否点赞
    };
  },

  methods: {
    //交卷
    doHandInPapers() {
      let answer_time = Date.now() - this.startTime;
      let answer_time_text = "0分30秒";
      let param = {
        bank_id: this.bank_id,
        subject_id: this.subject_id,
        type: this.type,
        chapter_id: this.chapter_id,
        joint_id: this.joint_id,
        papers_id: this.papers_id,
        answer_time: answer_time
      };
      this.$axios.post("/bank/doHandInPapers", param).then(res => {
        if (res.code == 200) {
          let resStr =
            this.type == 3
              ? `耗时${answer_time_text}，得分${res.data.answer_score}分`
              : `耗时${answer_time_text}`;
          this.$Toast(res.msg);
          Dialog.confirm({
            cancelButtonText: "查看解析",
            confirmButtonText: "再做一遍",
            title: "该试卷已做完，",
            message: resStr
          })
            .then(() => {
              this.doHandInPapers();
            })
            .catch(() => {
              this.$store.commit("zjList", "");
              this.initData();
            });
        } else {
          this.$Toast(res.msg);
        }
      });
    },
    setAnswer(answerObj) {
      let index = this.dataList.findIndex(
        item => item.exam_id == answerObj.exam_id
      );
      answerObj.showAnswer = this.showAnswer;
      this.$set(this.dataList, index, answerObj);
    },
    swipeHref(index) {
      this.$refs.swipe["swipeTo"](index);
      this.tikaShow = false;
    },
    initData() {
      //有未做完得题
      if (this.$store.state.question.zjList) {
        let zjList = this.$store.state.question.zjList;
        if (zjList) {
          this.dataList = JSON.parse(zjList);
          this.total = this.dataList.length;
          if (this.dataList[0]) {
            this.isStar = this.dataList[0].is_collect == 1;
            this.$store.commit("papers_id", this.dataList[0].papers_id);
          }
          this.$store.commit("zjList", "");
          return;
        }
      }
      if (this.type == 1) {
        if (this.model == 1) {
          this.showAnswer = true; //是否立即显示答案
        } else {
          this.showAnswer = false; //是否立即显示答案
        }
      }
      let param = {
        bank_id: this.bank_id,
        subject_id: this.subject_id,
        type: this.type
      };
      if (this.type == 1) {
        param.chapter_id = this.chapter_id;
        param.joint_id = this.joint_id;
        param.question_type = this.question_type;
        param.exam_type = this.exam_type;
        param.exam_count = this.exam_count;
        param.model = this.model;
      } else if (this.type == 3) {
        param.papers_id = this.papers_id;
      }
      this.$axios.post("/bank/doRandExamList", param).then(res => {
        if (res.code == 200) {
          this.dataList = [];
          for (let i in res.data) {
            var arr = res.data[i];
            for (var item of arr) {
              item.type = i;
              item.showAnswer = this.showAnswer;
            }
            this.dataList = this.dataList.concat(arr);
          }
          this.total = this.dataList.length;
          if (this.dataList[0]) {
            this.isStar = this.dataList[0].is_collect == 1;
            this.$store.commit("papers_id", this.dataList[0].papers_id);
          }
          console.log(this.dataList);
        } else {
          this.$Toast(res.msg);
        }
      });
    },
    tikaClose() {
      this.tikaShow = false;
    },
    //tabBar题卡
    tikaShowMethod() {
      this.tikaShow = true;
      console.log("题卡");
    },
    //tabBar提交
    tabBarSubmit() {
      let obj = this.getAnswer();
      if (obj.not.length > 0) {
        Dialog.confirm({
          title: "提示",
          message: `您还有${obj.not.length}道题没有做，是否提交？`
        }).then(() => {
          this.doHandInPapers();
        });
      } else {
        Dialog.confirm({
          title: "提示",
          message: `请确认是否交卷？`
        }).then(() => {
          this.doHandInPapers();
        });
      }
    },
    swipeChange(method) {
      if (method == "next" && this.current == this.total - 1) {
        return;
      } else if (method == "prev" && this.current == 0) {
        return;
      }
      this.$refs.swipe[method]();
    },
    change(index) {
      this.current = index;
      console.log(index);
      this.isStar = this.dataList[index].is_collect == 1;
    },
    starClick() {
      let param = {
        bank_id: this.bank_id,
        subject_id: this.subject_id,
        exam_id: this.dataList[this.current].exam_id,
        type: this.type
      };
      this.$store.commit("exam_id", param.exam_id);
      this.$axios.post("/bank/doCollectQuestion", param).then(res => {
        if (res.code == 200) {
          this.isStar = !this.isStar;
          this.$set(
            this.dataList[this.current],
            "is_collect",
            this.isStar ? 1 : 0
          );
          this.$Toast(res.msg);
        } else {
          this.$Toast(res.msg);
        }
      });
    },
    //手机事件
    clickLeft() {
      console.log("left点击");
      this.$router.push("/question");
    },
    //获取答题信息
    getAnswer() {
      var not = this.dataList.filter(item => item.is_right == 0);
      var right = this.dataList.filter(item => item.is_right == 1);
      var error = this.dataList.filter(item => item.is_right == 2);
      return {
        not,
        right,
        error
      };
    }
  }
};
</script> 

<style lang="less" scoped>
@import "../question.less";
.margin-b {
  margin-bottom: 25px;
}
/deep/ .van-nav-bar {
  z-index: 99;
}

/deep/ .DropDown .van-popup--top {
  width: 200px;
}
.phone-wrap {
  position: relative;
  margin: 0 auto;
  background-color: #fff;
}
.y-progress {
  position: relative;
  margin: 10px;
  height: 30px;
  padding: 0 60px 10px 10px;
  background-color: #fafafa;
  .progress-tip {
    position: absolute;
    right: 5px;
    top: 10px;
  }
}
/deep/ .van-progress {
  top: 16px;
}
/deep/ .van-swipe {
  min-height: 60vh;
}
/deep/ .van-swipe__track {
  min-height: 60vh;
}
.y-question {
  padding-bottom: 50px;
}
</style>
